---
type: tutorial
title: 最初のAstroページを作成する
description: |-
  「初めてのAstroブログ」チュートリアル -
  サイトに新しいページを追加し、それらをつなぐナビゲーションリンクを追加する
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

`.astro`ファイルがウェブサイトのページとして機能することを理解できたところで、実際に作成してみましょう！

<PreCheck>
  - 概要（About）とブログ（Blog）という、2つの新しいページを作成する
  - ページにナビゲーションリンクを追加する
  - 更新されたバージョンのウェブサイトをウェブ上にデプロイする
</PreCheck>

## 新しい`.astro`ファイルを作成する

<Steps>
1. コードエディターのファイルペインで、既存の`index.astro`ファイルがある`src/pages/`フォルダに移動します。

2. そのフォルダ内で、`about.astro`という名前の新しいファイルを作成します。

3. 新しい`about.astro`ファイルに`index.astro`の内容をコピーまたは再入力します。

    :::tip
    エディタ上で、このファイルのタブラベルに白丸が表示される場合があります。これは、ファイルがまだ保存されていないことを意味します。VS Codeのファイルメニューで「自動保存」を有効にすると、ファイルを手動で保存する必要はなくなります。
    :::

4. `/about`をアドレスバーのURL末尾に追加し、ページがロードされることを確認します。(たとえば`http://localhost:4321/about`)
</Steps>

現在、「概要」ページは最初のページとまったく同じに見えるはずですが、これを変更していきます！

## ページを編集する

HTMLコンテンツを編集して、このページをあなたについての内容にします。

概要ページのコンテンツを変更または追加するには、コンテンツを含むHTML要素タグを追加します。既存の`<body></body>`タグの間に、以下のHTMLコードをコピーして貼り付けるか、独自のコードを追加してください。

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>私のAstroサイト</h1>
  <h1>私について</h1>
  <h2>... そして私の新しいAstroサイトについて！</h2>

  <p>私はAstroの入門チュートリアルを進めています。これは私のウェブサイトの2番目のページで、自分で作った初めてのページです！</p>

  <p>このサイトはチュートリアルを進めるにつれて更新されていきます。定期的にチェックして、私の旅の様子を見に来てください！</p>
</body>
```

ブラウザタブから`/about`ページに再度アクセスすると、更新されたコンテンツが表示されるはずです。

## ナビゲーションリンクを追加する

各ページをプレビューしやすくするために、`index.astro`と`about.astro`の両ページ上部にある`<h1>`の前に、HTMLページナビゲーションリンクを追加します。

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">ホーム</a>
<a href="/about/">概要</a>

<h1>私について</h1>
<h2>... そして私の新しいAstroサイトについて！</h2>
```

これらのリンクをクリックして、サイト内のページを行き来できることを確認してください。

:::note
他の多くのフレームワークと異なり、Astroは標準のHTML`<a>`要素を使用して従来のページ更新によりページ（_ルート_、_routes_）間を移動します。
:::

<Box icon="puzzle-piece">
## やってみよう - ブログページの追加

[上と同じステップ](#新しいastroファイルを作成する)に従って、サイトに3番目のページ`blog.astro`を追加してみましょう。

(各ページに3番目のナビゲーションリンクを追加するのを忘れないでください。)

<details>
<summary>手順を表示</summary>
<Steps>
1. 新しいファイル`src/pages/blog.astro`を作成します。
2. `index.astro`の内容をすべてコピーして`blog.astro`に貼り付けます。
3. 以下のようにページの上部に[3番目のナビゲーションリンク](#ナビゲーションリンクを追加する)を追加します。
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">ホーム</a>
  <a href="/about/">概要</a>
  <a href="/blog/">ブログ</a>

  <h1>私のAstroサイト</h1>
</body>
```
</details>
</Box>

これで、お互いにリンクする3つのページをもつウェブサイトができました。ブログページにコンテンツを追加しましょう。

`blog.astro`のページコンテンツを以下のように変更します。
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">ホーム</a>
  <a href="/about/">概要</a>
  <a href="/blog/">ブログ</a>

  <h1>私のAstroサイト</h1>
  <h1>私のAstro学習ブログ</h1>
  <p>ここには、私がAstroを学んでいく旅の様子を投稿します。</p>
</body>
```

ブラウザで3つのページすべてにアクセスし、以下のことを確認してください。
- すべてのページが正しく3つのページにリンクしている
- 2つの新しいページにはそれぞれ独自の説明的な見出しがある
- 2つの新しいページにはそれぞれ独自の段落テキストがある

## 変更をウェブ上に公開する

ユニット1に従ってセットアップをおこなっていれば、Netlifyを通じて変更をサイトに公開できます。

プレビューの見た目に満足したら、変更をGitHubのオンラインリポジトリに**コミット**します。

<Steps>
1. VS Codeで、最後にGitHubにコミットした後に変更されたファイルをプレビューします。

    - 左のメニューの**ソース管理タブ**に移動します。小さな「3」が表示されているはずです。

    - 変更されたファイルとして、`index.astro`、`about.astro`、`blog.astro`が表示されているはずです。

2. テキストボックスにコミットメッセージ（たとえば「2つの新しいページ（aboutとblog）を追加した」）を入力し、<kbd>Ctrl + Enter</kbd>（macOSでは<kbd>Cmd ⌘ + Enter</kbd>）を押して、現在のワークスペースに変更をコミットします。

3. <kbd>変更の同期</kbd>ボタンをクリックして、GitHubに変更を同期します。

4. 数分待ってからNetlifyのURLにアクセスして、変更が公開されていることを確認します。
</Steps>

:::tip[定期的にコミットとデプロイをおこなう]
作業を中断するたびに以上の手順をおこないましょう！変更はGitHubリポジトリに同期されます。Netlifyのウェブサイトにデプロイした場合は、再ビルドされて再公開されます。
:::



<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] ウェブサイトに新しいページを作成し、既存のページからリンクできる。
- [ ] 変更をGitHubにコミットし、Netlify上のサイトを更新できる。
</Checklist>
</Box>

### 参考

- [Astroでのファイルベースルーティング](/ja/basics/astro-pages/#ファイルベースルーティング)

- [AstroページのHTML](/ja/basics/astro-pages/#astroページ)
